<%@ page language="java" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>div</title>
<style type="text/css">
.myDiv1 {
	width: 100%;
	height: 90px
}

.myDiv1 ul {
	width: 100%;
	list-style: none;
	margin: 4;
	padding: 0;
	height: 90px
}

.myDiv1 ul li {
	width: 100px;
	float: left;
	border: 1px solid #000;
	height: 90px;
	margin: 1;
}
.damage{
	position: absolute;
	color: red;
	z-index: 2;
	display: none;
	font-weight: bold;
	font-size: large;
}
</style>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/*
	function move() {
		$("#lingmengli").animate({
			marginLeft : '-=50px',
			height : '+=100px',
			width : '+=100px'
		}, 200);
		$("#lingmengli").animate({
			marginLeft : '+=50px',
			height : '-=100px',
			width : '-=100px'
		}, 200);
		$("#molisha").animate({
			marginLeft : '-=10px',			
		}, 30);
		$("#molisha").animate({
			marginLeft : '+=20px',			
		}, 30);
		$("#molisha").animate({
			marginLeft : '-=10px',			
		}, 30);
	}
	*/
	var FUNC=[
	          function() {$("#lingmengli").animate({marginLeft : '-=50px',height : '+=100px',width : '+=100px'},200,aniCB);},
	          function() {$("#lingmengli").animate({marginLeft : '+=50px',height : '-=100px',width : '-=100px'},200,aniCB);},
	          function() {$("#molisha").animate({marginLeft : '-=10px'},30,aniCB);},
	          function() {$("#molisha").animate({marginLeft : '+=20px'},30,aniCB);},
	          function() {$("#molisha").animate({marginLeft : '-=10px'},30,aniCB);},	  
	          function() {$("#damage").animate({height:'show'},200,aniCB);},
	          function() {$("#damage").animate({marginTop : '-=50px'},400,aniCB);},
	          function() {$("#damage").animate({height:'hide'},200,aniCB);},
	      ];
	      var aniCB=function() {	    	 
	          $(document).dequeue("myAnimation");
	      }
	      $(document).queue("myAnimation",FUNC);
	function move(){
		var offset = $("#molisha").offset();   //获取p元素的offset()  
    	 
   	  var left = offset.left;   //获取左偏移  
   	 
   	  var top =  offset.top;  
   	  $("#damage").css("margin-left",left+30);
   	  $("#damage").css("margin-top",top+50);
   	aniCB();
	}
</script>
</head>

<body>
	<div id="damage" class="damage">100</div>
	<div class="myDiv1">
		<ul>
			<li style="position: absolute; margin-left: 1px">1</li>
			<li style="position: absolute; margin-left: 105px">2</li>
			<li style="position: absolute; margin-left: 209px; z-index: 1"
				id="lingmengli"><img src="../image/lingmeng.jpg" width="100%"
				height="100%"></li>
			<li style="position: absolute; margin-left: 313px">4</li>
			<li style="position: absolute; margin-left: 417px">5</li>
		</ul>
	</div>
	<div class="myDiv1">
		<ul>
			<li style="position: absolute; margin-left: 1px">1</li>
			<li style="position: absolute; margin-left: 105px">2</li>
			<li style="position: absolute; margin-left: 209px; z-index: 1"
				id="molisha"><img src="../image/molisha.jpg" width="100%"
				height="100%"></li>
			<li style="position: absolute; margin-left: 313px">4</li>
			<li style="position: absolute; margin-left: 417px">5</li>
		</ul>
	</div>
	<input value="动画开始" type="button" onclick="move();">
</body>
</html>
